<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<html>--%>
<%--<head>--%>
    <%--<title>用户列表</title>--%>
    <%--<!-- 引入样式 -->--%>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<%--</head>--%>
<%--<body>--%>
<%--<!-- 引入组件库 -->--%>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.4.7/lib/index.js"></script>
<div id="app">

    <el-container>
        <el-header>添加水果信息</el-header>
        <el-main>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="水果名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="简介">
                    <el-input v-model="form.desc"></el-input>
                </el-form-item>

                <el-form-item label="价格">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>

                <el-form-item label="宣传图">
                    <el-upload
                            class="upload-demo"
                            action="/upload"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            :on-success="handleSuccess"
                            multiple
                            :limit="1"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                        <el-button size="small">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">添加</el-button>
                </el-form-item>
            </el-form>

        </el-main>
        <el-footer></el-footer>
    </el-container>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            fileList: [],
            form: {
                name: '',
                desc: '',
                price: 0,
                pic: ''
            }
        },
        methods: {
            handleSuccess(response, file, fileList){
                var fileName = response.data[0];
                this.form.pic = fileName;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning('当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件');
            },
            beforeRemove(file, fileList) {
                return this.$confirm('确定移除 ${ file.name }？');
            },
            onSubmit: function(){
                var self = this;
                $.ajax({
                    url: '/manage/fruit?action=insert',
                    type: 'POST',
                    dataType: 'JSON',
                    data: this.form,
                    success: function(data){
                        console.log(data);
                        if(data.status == 0){
                            self.$notify.success({
                                title: '成功',
                                message: '添加成功'
                            });
                        }else{
                            self.$notify.error({
                                title: '错误',
                                message: data.message
                            });
                        }
                    }

                })
            }
        }
    });
</script>
<%--</body>--%>
<%--</html>--%>
